<template>
  <div class="search-data">
    <van-tabs
      v-model="active"
      animated
      title-inactive-color="#808080"
      type="none"
      @click="onclick"
    >
      <van-tab v-for="(item, index) in list" :key="index" :title="'' + item"
        ><div class="listBox">
          <div
            class="datalist"
            v-for="item in data.list"
            :key="item.id"
            @click="viewArticles(item)"
          >
            <img :src="item.cover" alt="" />
            <div class="right">
              <div>{{ getLength(item.title) }}</div>
              <div>{{ item.subtitle }}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "searchData",
  props: ["data"],
  data() {
    return {
      active: 1,
      list: ["全部", "日签", "阅读", "收音机", "书影", "作者"],
      obj: { 1: "hp", 2: "reading", 3: "radio", 4: "movie", 5: "author" },
    };
  },
  methods: {
    onclick(name, title) {
      console.log(name, title);
      this.$emit("onclick", this.obj[name]);
    },
    viewArticles(item) {
      console.log("跳转的id", item);
      // 跳转到文章详情页
      if (item.category === 1) {
        console.log("跳转的id", item);
        this.$router.push({
          path: "/articlesPage",
          query: {
            id: item.content_id,
            category: item.category,
            title: JSON.stringify([{ title: "阅读" }]),
            // //  title:  encodeURIComponent(title),
            titleTR: encodeURIComponent("阅读"),
          },
        });
      } else if (item.category === 0) {
        this.$router.push(`/imageText/${item.date.substr(0, 10)}`);
      } else if (item.category === 5) {
        this.$router.push(`/bookShadowContent/${item.content_id}`);
      } else if (item.category === 8) {
        // 跳转到收音机页面
        console.log("跳转到收音机页面");
        this.$router.push({
          path: "/radio",
          query: {
            id: item.content_id,
          },
        });
      } else if (item.category === 10) {
        this.$router.push({
          path: "/authorWork",
          query: {
            id: item.content_id,
          },
        });
      }
    },

    // 处理字数长度的方法
    getLength(str) {
      if (str.length > 15) {
        return str.substr(0, 15) + "...";
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search-data {
  padding: 0px 15px 0 15px;
  ::v-deep .van-tab__text {
    font-size: 16px;
    margin: 10px 0;
  }
  .listBox {
    .datalist {
      display: flex;
      align-items: center;
      margin: 20px 0;
      img {
        width: 50px;
        display: block;
      }
      .right {
        margin-left: 10px;
        & > :nth-child(1) {
          font-size: 16px;
          color: #000;
          margin-bottom: 10px;
        }
        & > :nth-child(2) {
          font-size: 14px;
          color: #cccccc;
        }
      }
    }
  }
}
</style>